<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浙江陈姐的个人主页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(-45deg, #2c3e50, #3498db, #9b59b6, #1abc9c);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            font-family: 'Segoe UI', sans-serif;
        }

        .card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 2rem 3rem;
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
            position: relative;
            transition: transform 0.3s;
        }

        .card:hover {
            transform: scale(1.05);
            box-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
        }

        .glow {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            animation: glow 2s ease-in-out infinite;
        }

        h1 {
            color: #fff;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            margin-bottom: 1.5rem;
            position: relative;
        }

        .info-list {
            list-style: none;
        }

        .info-list li {
            color: #fff;
            font-size: 1.2em;
            margin: 1rem 0;
            padding: 0.8rem 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            transition: transform 0.3s;
        }

        .info-list li:hover {
            transform: translateX(20px);
        }

        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.3);
            }
            50% {
                box-shadow: 0 0 40px 10px rgba(255, 255, 255, 0.5);
            }
        }

        .neon-text {
            text-shadow: 0 0 10px #fff,
                         0 0 20px #fff,
                         0 0 30px #e60073,
                         0 0 40px #e60073,
                         0 0 50px #e60073;
            animation: neon 1.5s ease-in-out infinite alternate;
        }

        @keyframes neon {
            from {
                text-shadow: 0 0 5px #fff,
                           0 0 10px #fff,
                           0 0 15px #ff1177,
                           0 0 20px #ff1177;
            }
            to {
                text-shadow: 0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #ff6699,
                           0 0 40px #ff6699;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="glow"></div>
        <h1 class="neon-text">🦄 浙江陈姐 🚀</h1>
        <ul class="info-list">
            <li>姓名：陈刘筱</li>
            <li>学号：242522022002</li>
            <li>班级：信安2201</li>
            <li>昵称：浙江陈姐</li>
        </ul>
    </div>
</body>
</html>


